<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <span class="erweima">x</span>
    </div>
    <button>删除</button>
    <ul>
        <li>li 标签</li>
        <li>li 标签</li>
        <li>li 标签</li> 
    </ul>

    <div>我是div</div>
    <span>我是span</span>

    <script>
        // 1. 父节点  parentNode
        var erweima = document.querySelector('.erweima');
        // erweima.parentNode;    父节点    得到离元素最近的父节点   如果找不到父节点就返回 null
        
        // 2. 子节点
        // DOM 提供的方法
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        // (1).子节点  childNodes 所有的子节点 包含  元素节点  文本节点 等等。。。
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        // (2). children  获取所有的子元素节点   常用于实际开发中
        console.log(ul.children);

        // 获取第一/最后一个节点
        // 1. firstChild 第一个子节点  不管是文本节点还是元素节点
        console.log(ul.firstChild);
        console.log(ul.lastChild);
        // 2. firstElementChild  返回第一个子元素节点
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
        // 实际开发写法 ： 既没有兼容性问题，又返回第一个子元素
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1]); // 最后一个元素

        // 3. 兄弟节点
        var div = document.querySelector('div');
        // nextSibling  下一个兄弟节点  包含元素节点 或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // nextElementSibling  得到下一个兄弟节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

        // 4. 创建、添加、删除节点
        // （1）创建元素节点
        var li = document.createElement('li');
        // (2) 添加节点  node.appendChild(child)  node父级  child子级  后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // (3). 添加节点 node.insertBefore(child, 指定元素);
        var li2 = document.createElement('li');
        ul.insertBefore(li2, ul.children[0]);
        // （4）删除节点  node.removeChild(child);
        var btn = document.querySelector('button');
        // ul.removeChild(ul.children[0]);
        // 点击按钮依次删除元素
        btn.onclick = function() {
            if (ul.children.length == 0) {
                alert('所有内容已经删除完了！！！');
                this.disabled = ture;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
        // (5) 复制节点
        // 浅复制 node.cloneNode(); 括号为空或者里面是false  浅复制：只复制标签不复制里面的内容
        var lili = ul.children[0].cloneNode();
        ul.appendChild(lili);
        // 深复制 node.cloneNode(); 里面是true  深复制：复制标签复制里面的内容
        var lili2 = ul.children[1].cloneNode();
        ul.appendChild(lili2);


    </script>
</body>
</html>